<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        
        <title>View</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/view.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/view.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendoview"><a href="#kendoview">kendo.View</a></h1>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-evalTemplate">
<a href="#configuration-evalTemplate">evalTemplate </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>If set to <code>true</code>, the view template will be treated as kendo template and evaluated against the provided model instance.</p>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;
&lt;script id="foo-template" type="text/x-kendo-template"&gt;
    &lt;span&gt;#: foo #&lt;/span&gt;
&lt;/script&gt;
&lt;script&gt;
 var foo = { foo: "foo" }
 var view = new kendo.View('foo-template', { model: foo, evalTemplate: true });
 view.render($("#app"));
&lt;/script&gt;
</code></pre>

<h3 id="configuration-model">
<a href="#configuration-model">model </a><code>ObservableObject</code><em>(default: null)</em>
</h3>

<p>The MVVM model to bind the element to.</p>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;
&lt;script&gt;
 var foo = { foo: "foo" }
 var view = new kendo.View('&lt;span data-bind="text:foo"&gt;&lt;/span&gt;', { model: foo });
 view.render($("#app"));
&lt;/script&gt;
</code></pre>

<h3 id="configuration-tagName">
<a href="#configuration-tagName">tagName </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "div")</em>
</h3>

<p>The tag used for the root element of the view.</p>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;

&lt;script&gt;
var view = new kendo.View("Hi!", { tagName: "span" });
view.render($("#app"));
&lt;/script&gt;
</code></pre>

<h3 id="configuration-wrap">
<a href="#configuration-wrap">wrap </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>false</code>, the view will not wrap its contents in a root element. In that case, the view element will point to the root element in the template. If false, the view template should have a <strong>single</strong> root element.</p>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;

&lt;script&gt;
var view = new kendo.View('&lt;div id="foo"&gt;&lt;/div&gt;', { wrap: false });
view.render($("#app"));
console.log(view.element.attr('id')) // foo
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-destroy"><a href="#methods-destroy">destroy</a></h3>

<p>Removes the <strong>View</strong> element from the DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.</p>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;

&lt;script&gt;
var view = new kendo.View("Hi!", { tagName: "span" });
view.render($("#app"));
view.destroy();
&lt;/script&gt;
</code></pre>

<h3 id="methods-render"><a href="#methods-render">render</a></h3>

<p>Renders the view contents. Accepts a jQuery selector (or jQuery object) to which the contents will be appended.
Alternatively, the render method can be called without parameters in order to retrieve the View element for manual insertion/further manipulation.</p>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;

&lt;script&gt;
var index = new kendo.View('&lt;span&gt;Hello World!&lt;/span&gt;');
index.render("#app");
&lt;/script&gt;
</code></pre>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;

&lt;script&gt;
var index = new kendo.View('&lt;span&gt;Hello World!&lt;/span&gt;');
$("#app").append(index.render());
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>container <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>(optional) the element in which the view element will be appended.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a> the view element.</p>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-hide"><a href="#events-hide">hide</a></h3>

<p>Fires when the View is replaced in a layout placeholder.</p>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;

&lt;script&gt;
var foo = new kendo.View("&lt;span&gt;Foo&lt;/span&gt;", { hide: function() { console.log("Foo is hidden now"); }});
var bar = new kendo.View("&lt;span&gt;Bar&lt;/span&gt;");

var layout = new kendo.Layout("&lt;header&gt;Header&lt;/header&gt;&lt;section id='content'&gt;&lt;/section&gt;&lt;footer&gt;&lt;/footer&gt;");

layout.render($("#app"));

layout.showIn("#content", foo);
layout.showIn("#content", bar);
&lt;/script&gt;
</code></pre>

<h3 id="events-init"><a href="#events-init">init</a></h3>

<p>Fires the first time the view renders.</p>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;

&lt;script&gt;
var view = new kendo.View("Hi!", { init: function() { console.log("View is initiated"); } });
view.render($("#app"));
&lt;/script&gt;
</code></pre>

<h3 id="events-show"><a href="#events-show">show</a></h3>

<p>Fires after the View is rendered (either by calling <code>render</code>, or by being rendered from the <strong>Layout</strong> <code>showIn</code> method).</p>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;

&lt;script&gt;
var view = new kendo.View("Hi!", { show: function() { console.log("View is rendered") } });
view.render($("#app"));
&lt;/script&gt;
</code></pre>

<h3 id="events-transitionStart"><a href="#events-transitionStart">transitionStart</a></h3>

<p>Fires when the view transition starts. The <code>type</code> event data is set to either <code>"show"</code> or <code>"hide"</code>. For more details on view Transitions check the <a href="layout#methods-showIn">layout showIn</a> method.</p>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;

&lt;script&gt;
var foo = new kendo.View("&lt;span&gt;Foo&lt;/span&gt;");
var bar = new kendo.View("&lt;span&gt;Bar&lt;/span&gt;", { transitionStart: function() { console.log(e) }});

var layout = new kendo.Layout("&lt;header&gt;Header&lt;/header&gt;&lt;section id='content'&gt;&lt;/section&gt;&lt;footer&gt;&lt;/footer&gt;");

layout.render($("#app"));

layout.showIn("#content", foo);
layout.showIn("#content", bar);
&lt;/script&gt;
</code></pre>

<h3 id="events-transitionEnd"><a href="#events-transitionEnd">transitionEnd</a></h3>

<p>Fires after the view transition container has its <code>k-fx-end</code> class set. The <code>type</code> event data is set to either <code>"show"</code> or <code>"hide"</code>. For more details on view Transitions check the <a href="layout#methods-showIn">layout showIn</a> method.</p>

<h4>Example</h4>

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;

&lt;script&gt;
var foo = new kendo.View("&lt;span&gt;Foo&lt;/span&gt;");
var bar = new kendo.View("&lt;span&gt;Bar&lt;/span&gt;", { transitionEnd: function() { console.log(e) }});

var layout = new kendo.Layout("&lt;header&gt;Header&lt;/header&gt;&lt;section id='content'&gt;&lt;/section&gt;&lt;footer&gt;&lt;/footer&gt;");

layout.render($("#app"));

layout.showIn("#content", foo);
layout.showIn("#content", bar);
&lt;/script&gt;
</code></pre>

<h2 id="fields"><a href="#fields">Fields</a></h2>

<h3 id="fields-element">
<a href="#fields-element">element </a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h3>

<p>The element of the <strong>View</strong>. Gets instantiated after the <code>render</code> method is called.</p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

